<template>
    <el-header>
        <div class="l-content">
            <!-- 图标的展示 -->
            <el-button size="small" plain @click="handleCollapse">
                <el-icon :size="20">
                    <Menu />
                </el-icon>
            </el-button>
            <h3>首页</h3>
        </div>
        <div class="r-content">
            <el-dropdown>
                <span class="el-dropdown-link">
                    <img class="user" :src="getImgSrc()">
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>个人中心</el-dropdown-item>
                        <el-dropdown-item>退出</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </el-header>
</template>

<script>
import { defineComponent } from 'vue';
import { useStore } from 'vuex'
export default defineComponent ({
    setup(){
        let store = useStore();
        // const imgSrc = require('../assets/images/portrait.jpg')  // webPack 打包可以使用 vite 使用提示require undefined
        const getImgSrc = () => {
            return new URL('../assets/images/portrait.jpg',import.meta.url).href;
        }
        let handleCollapse = () => {
            // 调用 vuex 中的 mutations
            store.commit('updateIsCollapse');
        }
        return {
            // imgSrc,
            getImgSrc,
            handleCollapse
        }
    }
})

</script>

<style lang="less" scoped>
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: #333;
}

.l-content{
    display: flex;
    align-items: center;
    .el-button{
        margin-right: 20px;
    }
    h3{
        color: #fff;
    }
}
.r-content{
    .user{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
    }
}
</style>
